<template>
    <div class="goodlist">
        <ul >
            <li v-for="item in goodslist" :key="item.id" @click="goDetail(item.id)">
                <img  :src="item.img_url" alt="">
                <h1 class="title">{{item.title}}</h1>
                <div class="info">
                    <p class="price">
                        <span>￥{{item.market_price}}</span>
                        <del>￥{{item.sell_price}}</del>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩{{item.stock_quantity}}件</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                pageindex:1,
                goodslist: []
            }
        },
        created(){
            this.getGoodList()
        },
        methods:{
            getGoodList(){
                this.$http.get('http://027xin.com:8899/api/getgoods?pageindex='+this.pageindex).then(res => {
                    if(res.data.status ===0) {
                        // console.log(res.data)
                        this.goodslist = res.data.message
                    }
                })
            },
            goDetail(id){
                //this.$router.push("/home/goodlist/" +id)
                this.$router.push({ name: "goodsinfo", params: { id } });
            }
        }
    }
</script>
<style>
.goodlist{
  width:100%;
  padding: 7px;
  
}
.goodlist ul{
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    
}
.goodlist ul img{
    width:100%;
}
.goodlist ul li{ 
    float: left;
    width: 49%;
    border: 1px solid #ccc;
    margin-bottom: 7px;
}
.goodlist ul li:nth-child(2n){
    float: right;
}
.info{
   background-color: #eee; 
    overflow: hidden;
    margin-top: 10px
}
.title{
    font-size: 15px;
    height: 45px;
}
.sell span{
    float: left;
    padding:0 4px ;
}
.sell span:nth-child(2n){
    float: right;
}
.price{
    padding: 5px;
}
.price span{
    color: red;
    font-weight: bold;
    font-size: 16px;
}
.price del{
    color:#ccc;
    font-weight: normal;
    font-size: 13px;
    margin-left: 12px
}
</style>